<template>
  <el-row style="height:100%">
    <page report="true">
      <pageheader :event="'memberPopUp'" :isShow="buttonPermissions.isAdd"></pageheader>
      <div class="page-content">
        <el-card class="box-card">
          <div style="margin: 10px 0px 20px">
            <span>人员信息姓名：</span>
            <el-input v-model="person_name" size="small" class="search-input" clearable>
              <el-button slot="append" icon="el-icon-search"
                         @click="searchInput"></el-button>
            </el-input>
            <span class="search-tit">人员电话：</span>
            <el-input v-model="person_mobile" size="small" class="search-input" clearable>
              <el-button slot="append" icon="el-icon-search"
                         @click="searchInput"></el-button>
            </el-input>
            <span class="search-tit">人员编号：</span>
            <el-input v-model="person_number" size="small" class="search-input" clearable>
              <el-button slot="append" icon="el-icon-search"
                         @click="searchInput"></el-button>
            </el-input>
          </div>

          <el-table :data="tableData" size="small" stripe>
            <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
            <el-table-column label="FaceID" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.person_img_url" alt="" class="headImg" @click="detailsCreate(scope.row.person_id)">
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="person_name" align="center"></el-table-column>
            <el-table-column :label="global.memberName" prop="person_number" align="center"></el-table-column>
            <el-table-column label="年龄" prop="age" align="center" width="60"></el-table-column>
            <el-table-column label="性别" prop="sex" align="center" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.sex == 1"> 男</span>
                <span v-else-if="scope.row.sex == 0">女</span>
                <span v-else>未知</span>
              </template>
            </el-table-column>f
            <el-table-column label="手机号" prop="mobile" align="center"></el-table-column>
<!--            <el-table-column label="对外编号" prop="ext_number" align="center"></el-table-column>-->
            <el-table-column :label="global.memberDate" prop="record_date" align="center"></el-table-column>
            <el-table-column v-if="buttonPermissions.isModify || buttonPermissions.isDel"
                             label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button v-if="buttonPermissions.isModify"
                           @click="detailsCreate(scope.row.person_id)"
                           size="small">详情
                </el-button>
                <el-button v-if="buttonPermissions.isDel"
                           @click="deleteMember(scope.row)"
                           type="danger" size="small">删除
              </el-button>
              </template>

            </el-table-column>
          </el-table>
          <el-pagination background
                         layout="total,sizes,prev,pager,next"
                         @current-change="currentChange"
                         @size-change="sizeChange"
                         :page-sizes="pagination.pageSizes"
                         :page-size.sync="pagination.pageSize"
                         :total="pagination.total"
                         :current-page.sync="pagination.currentPage"
                         class="paging fr">
          </el-pagination>
        </el-card>
        <el-dialog v-dialogDrag :title="pageTitle" :visible.sync="isShow" @close="closeDialog"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
            <el-form-item label="上传头像" prop="imageUrl">
              <h6>上传图片只支持png,jpg,jpeg格式图片,图片大小不得超过5M'</h6>
              <div class="upload">
                <div class="upload-head">
                  <span class="upload-head-title">上传头像：</span>
                  <el-upload
                    class="avatar-uploader"
                    :class="ruleForm.imageUrl?'UpFileHidden':''"
                    :file-list="ruleForm.imageUrlArr"
                    action="#"
                    ref="upload"
                    :auto-upload="false"
                    list-type="picture-card"
                    :limit="1"
                    :on-change="(file)=>getFile(file)"
                    :on-remove="(file)=>imgRemove(file)">
<!--                    <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">-->
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="姓名" prop="person_name">
              <el-input v-model="ruleForm.person_name" size="small" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="ruleForm.age" size="small" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
              <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="ruleForm.mobile" size="small" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item :label="global.memberName" prop="person_number">
              <el-input v-model="ruleForm.person_number" size="small" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="对外编号" prop="ext_number">
              <el-input v-model="ruleForm.ext_number" size="small" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item :label="global.memberDate" prop="record_date_str">
              <el-date-picker
                v-model="ruleForm.record_date_str"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                size="small"
                style="width:400px">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isShow = false" size="small">取 消</el-button>
            <!--判断是否显示保存按钮：isDisabled 判断为是否为修改页面 -->
            <el-button v-if="(!isDisabled && buttonPermissions.isAdd) || (isDisabled && buttonPermissions.isModify)"
                       type="primary" @click="confirmDialog" size="small">保 存</el-button>
          </div>
        </el-dialog>

        <el-dialog v-dialogDrag :title="global.name +'详情'" :visible.sync="isShowMember" @close="closeMemberDialog"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="95%" top="10px">
          <el-row :gutter="20" class="card-centent">
            <el-col :span="6" style="height: 100%;">
              <el-card class="left-box">
                <div class="details-header">
                  <h6>{{global.name}}基本信息</h6>
                  <img :src="personData.person_img_url" alt="">
                  <p>{{personData.person_name}}/{{personData.sex == 1 ? '男': personData.sex == 0 ? '女':'未知'}}/{{personData.age}}</p>
                  <el-button type="primary" size="small"
                             @click="editMember"
                             style="margin-bottom: 15px">编辑详情</el-button>
                </div>
                <div class="details-footer">
                  <ul>
                    <li>
                      <span class="details-footer-tit">手机号：</span>
                      <span class="details-footer-centent">{{personData.mobile}}</span>
                    </li>
                    <li>
                      <span class="details-footer-tit">{{global.memberName}}：</span>
                      <span class="details-footer-centent">{{personData.person_number}}</span>
                    </li>
                    <li>
                      <span class="details-footer-tit">{{global.memberDate}}：</span>
                      <span class="details-footer-centent">{{personData.record_date}}</span>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="18" style="height: 100%;">
              <el-card class="right-box">
                <div>
                  <span>所属企业：</span>
                  <el-cascader
                    v-model="tags_company_id_arr"
                    :placeholder="'选择所属企业'"
                    collapse-tags
                    :options="tags_optionsCom"
                    ref="cascaderRef"
                    :props="{
                         expandTrigger: 'hover',
                         multiple: 'true',
                        }"
                    @visible-change="tags_companyVisibleChange"
                    @remove-tag="tags_companyRemoveTag"
                    size="small"
                    style="width:400px">
                  </el-cascader>
                  <span style="margin-left: 20px">案场选择：</span>
                  <el-select
                    v-model="tags_case_id"
                    @change="tags_CaseChange"
                    filterable
                    size="small"
                    placeholder="请选择案场"
                    style="width:400px;display: inline-block">
                    <el-option
                      v-for="item in tags_optionsCase"
                      :key="item.id"
                      :label="item.case_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div style="margin: 10px 0px">
                  <span>日期选择：</span>
                  <el-date-picker
                    v-show="activeName != 'areaTrajectory'"
                    v-model="tags_start_day"
                    @change="getData"
                    type="daterange"
                    align="right"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    size="small"
                    style="width:400px">
                  </el-date-picker>
                  <el-date-picker
                    v-show="activeName == 'areaTrajectory'"
                    v-model="tags_day"
                    @change="getData"
                    type="date"
                    align="right"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="small"
                    style="width:400px">
                  </el-date-picker>
                  <span v-show="activeName == 'areaInfo'" style="margin-left: 20px">店铺选择：</span>
                  <el-select
                    v-show="activeName == 'areaInfo'"
                    v-model="tags_area_id"
                    @change="tags_AreaChange"
                    filterable
                    ref="areaRef"
                    size="small"
                    placeholder="请选择区域"
                    style="width:400px;display: inline-block">
                    <el-option
                      v-for="item in tags_optionsArea"
                      :key="item.area_id"
                      :label="item.area_name"
                      :value="item.area_id">
                    </el-option>
                  </el-select>
                </div>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="member-tags">
                  <el-tab-pane label="进场频次" name="caseInfo">
                    <el-table :data="case_tableData" size="small" stripe max-height="800">
                      <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                      <el-table-column label="进场日期" prop="intoTime" align="center"></el-table-column>
                      <el-table-column label="首次进场时间" prop="first_capture_time" align="center"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="进店频次" name="areaInfo">
                    <el-table :data="area_tableData" size="small" stripe max-height="800">
                      <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                      <el-table-column label="进店日期" prop="intoTime" align="center"></el-table-column>
                      <el-table-column label="首次进店时间" prop="first_capture_time" align="center"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="逛店轨迹" name="areaTrajectory" style="max-height: 600px;overflow: auto">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(activity, index) in areaTrajectory_tableData"
                        :key="index"
                        placement="top"
                        :timestamp="activity.capture_time">
                        <div class="timestamps">
                          <img :src="activity.capture_face_url ? activity.capture_face_url : ''"
                               class="timestamps-img" @click="showImg(activity)">
                          <p>
                            <i class="el-icon-location-information"></i><span>{{activity.area_name}}</span>
                          </p>
                          <p>
                            <i class="el-icon-video-camera"></i><span>{{activity.device_name}}</span>
                          </p>
                        </div>

                      </el-timeline-item>
                    </el-timeline>
                  </el-tab-pane>
                  <el-tab-pane label="品牌喜好" name="brandLike">
                    <el-table :data="brandLike_tableData" size="small" stripe max-height="800">
                      <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                      <el-table-column label="品牌名" prop="tag_name" align="center"></el-table-column>
                      <el-table-column label="时段内出现次数" prop="appear_count" align="center"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="业态喜好" name="formatLike">
                    <el-table :data="formatLike_tableData" size="small" stripe max-height="800">
                      <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                      <el-table-column label="品牌名" prop="tag_name" align="center"></el-table-column>
                      <el-table-column label="时段内出现次数" prop="appear_count" align="center"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
          </el-row>
        </el-dialog>

        <el-dialog v-dialogDrag title="抓拍图像" :visible.sync="isShowImg" @close="showImgUrl = ''"
                   :modal-append-to-body="false" :close-on-click-modal="false">
          <img v-show="showImgUrl" :src="showImgUrl" alt="">
          <div v-show="!showImgUrl" style = 'font-size: 20px;color: #b1afaf;text-align: center'>
            <span>无抓拍图像</span>
          </div>
        </el-dialog>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss" scoped>
  .page-content {
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
      .headImg{
        width: 80px;
        cursor: pointer;
      }
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .pad_left_30table{
      .el-table{
        .el-table__header-wrapper{
          .has-gutter{
            tr{
              th{
                &:first-child{
                  >.cell{
                    padding-left: 30px;
                  }
                }
              }
            }
          }
        }
        .el-table__body-wrapper{
          .el-table__body{
            tbody{
              tr{
                td{
                  &:first-child{
                    >.cell{
                      padding-left: 30px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .search-tit{
      margin-left: 20px;
    }
    .search-input{
      width: 300px;
    }
  }
  .card-centent{
    width: 100%;
    padding: 15px 0px;
    height: 90%;

    .left-box{
      text-align: center;
      height: 100%;
      .details-header{
        border-bottom:1px solid #ccc;
        h6{
          border-left:5px solid #0c78dd;
          text-align: left;
          padding-left: 10px;
        }
        img{
          width: 200px;
          display: inline-block;
          margin: 20px 0;
        }
        p{
          font-size: 18px;
          font-weight: 500;
          margin-bottom:10px;
        }
      }
      .details-footer{
        margin-top: 20px;
        ul{
          li{
            padding: 10px;
            .details-footer-tit{
              font-size: 16px;
              font-weight: 400;
            }
            .details-footer-centent{
              font-size: 18px;
              color:#847f8c;
            }
          }
        }
      }
    }
    .right-box{
      height: 100%;
    }
  }
  .timestamps{
    height: 80px;
    margin-top: 10px;
    position: relative;
    .timestamps-img{
      display: inline-block;
      width: 80px;
      height: 80px;
      position: absolute;
      top: 0px;
      left: 0px;
      cursor:pointer;
    }
    p{
      width: 100%;
      height: 30px;
      display: inline-block;
      i{
        display: inline-block;
        margin-left: 100px;
        margin-right: 10px;
      }
    }
  }
  .member-tags{
    max-height: 1000px;
    .el-tab-pane{
      max-height: 700px;
      overflow: auto;
    }
  }
</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  export default {
    data() {
      return {

        pageTitle:'',
        isShow:false,
        isDisabled:false,//是否为修改页面
        tableData:[],
        pagination:{
          total:0,//总条目数
          currentPage:1,//当前页数
          pageSize:10,//每页显示条目个数
          pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
        },
        person_name:'',
        person_mobile:'',
        person_number:'',
        ruleForm:{
          imageUrl:'',
          imageUrlArr:[],
          person_name:'',
          age:'',
          sex:'1',
          mobile:'',
          person_number:'',
          ext_number:'',
          record_date_str:'',
          drawingShow:false,//
        },
        rules:{
          person_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          imageUrl: [{ required: true, message: "请上传头像", trigger: "blur" }],
          person_number: [{ required: true, message: "", trigger: "blur" }],
        },

        isShowMember:false,//是否显示会员详情模态框；
        personData:{
          person_img_url:'',
          person_img_base64:'',
          person_name:'',
          age:'',
          sex:'1',
          mobile:'',
          person_number:'',
          ext_number:'',
          record_date_str:'',
          album_id:'',
          person_id:'',
        },//会员详情详细数据

        activeName:'caseInfo',//会员详情中的tags名称

        tags_optionsCom:[],
        tags_company_id_arr:[],
        tags_company_id:null,
        tags_case_id:'',
        tags_optionsCase:[],
        tags_area_id:'',
        tags_optionsArea:[],

        tags_start_day:[moment(new Date()).subtract(6, 'days').format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
        tags_day:moment(new Date()).format("YYYY-MM-DD"),
        case_tableData:[],
        area_tableData:[],
        areaTrajectory_tableData:[],
        brandLike_tableData:[],
        formatLike_tableData:[],

        isShowImg:false,
        showImgUrl:'',

        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;   //正常 今天之前
          },
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },

        buttonPermissions:{
          isAdd:false,
          isDel:false,
          isModify:false,
        },
        global: {},//公共参数
        code:this.$route.query.code
      }
    },
    components: {
      page,
      pageheader,
    },
    inject: ["reload"],
    watch:{
      //当route变化的时候，主要是报表之前传参
      $route(){
        this.reload()
      },
    },
    created() {
      //判断是否有按钮权限
      if(sessionStorage.buttonPermissions){
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
      for (let i in reportGlobal.queryList) {
        if (this.code == reportGlobal.queryList[i].code) {
          this.global = reportGlobal.queryList[i]
        }
      }
      console.log(this.global,'global');
      this.rules.person_number[0].message = '请输入'+ this.global.memberName
      this.getPersonList()
    },
    mounted() {
      //新增按钮点击事件
      this.$Bus.$on("memberPopUp", () => {
        this.isShow = true;
        this.isDisabled = false;
        this.pageTitle = '新增'+ this.global.name
      });
    },
    methods:{
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isAdd = menuButtonPermissions.includes('menberAdd') ? true : false; //是否有新增权限
        this.buttonPermissions.isModify = menuButtonPermissions.includes('memberModify') ? true : false; //是否有修改权限
        this.buttonPermissions.isDel = menuButtonPermissions.includes('memberDelete') ? true : false; //是否有删除权限
      },
      searchInput(){
        this.pagination.currentPage = 1;
        this.getPersonList()
      },
      //获取会员列表
      getPersonList(){
        let url = '/sys/face_person/person_list?person_name=' + this.person_name + '&person_mobile=' + this.person_mobile +
          '&person_number=' + this.person_number + '&page=' + this.pagination.currentPage + '&page_size=' + this.pagination.pageSize +
          '&person_type='+ this.global.person_type
        this.$api.post(url)
        .then(data => {
          console.log(data);
          let _data = data.data
          this.tableData = _data.dataList ? _data.dataList.map(x => {
            x.record_date = moment(x.record_date).format('YYYY-MM-DD HH:mm:ss')
            return x
          }) : []
          this.pagination.total = _data.dataCount;
          this.pagination.currentPage = _data.pageCode;
          this.pagination.pageSize = _data.pageSize;
          this.$Bus.$emit('Loading', false)
        })
        .catch(err => {
          console.log(err);
          this.tableData = [];
          this.$Bus.$emit('Loading', false)
        })
      },
      //表格序号显示方法
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },
      currentChange(){
        this.getPersonList()
      },
      sizeChange(){
        this.getPersonList()
      },
      //删除会员；
      deleteMember(data){
        this.$confirm("是否删除‘"+data.person_name+"’？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true)
          this.delData(data.person_id);
        })
        .catch(() => {
          return
        });
      },
      delData(id){
        let url='/sys/face_person/delete?person_id='+id
        this.$api.post(url)
        .then(data=>{
          console.log(data);
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data.data) {
            this.getPersonList()
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }else{
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
          this.$message.error('删除失败');
          this.$Bus.$emit('Loading',false);
        })
      },
      //保存按钮
      confirmDialog(){
        let data = {};
        let model = null;
        let url = '';
        this.$refs.ruleForm.validate(valid=>{
          if(valid){
            this.$Bus.$emit('Loading',true)
            model = this.$refs.ruleForm.model;
            if (this.isDisabled) {
              data.age = model.age
              data.ext_number = model.ext_number
              data.face_img_base64 =this.ruleForm.drawingShow ? this.personData.person_img_base64 : model.imageUrl
              data.mobile = model.mobile
              data.person_name = model.person_name
              data.person_number = model.person_number
              data.record_date_str = model.record_date_str
              data.sex = model.sex
              data.person_type = this.global.person_type
              data.person_id = this.personData.person_id
              url = "sys/face_person/update"
              this.modifyMenu(url, data);
            } else {
              data.age = model.age
              data.ext_number = model.ext_number
              data.face_img_base64 = model.imageUrl
              data.mobile = model.mobile
              data.person_name = model.person_name
              data.person_number = model.person_number
              data.person_type = this.global.person_type
              data.record_date_str = model.record_date_str
              data.sex = model.sex
              url = "sys/face_person/add";
              console.log(data,'data');
              this.addPerson(url, data);
            }
          }else{
            return
          }
        })
      },
      addPerson(url,params){
        this.$api.post(url, params)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          this.$Bus.$emit('Loading',false)
          if(data){
            this.getPersonList();
            this.isShow = false;
            this.$message({
              message: "新增成功",
              type: "success"
            });
          }
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false)
        })
      },

      modifyMenu(url,data){
        this.$api.post(url, data)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          this.$Bus.$emit('Loading',false)
          if(data){
            this.isShow = false
            this.getPersonList();
            if(this.isShowMember){
              this.detailsCreate(this.personData.person_id)
            }
            this.$message({
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false)
        })
      },
      //关闭模态框
      closeDialog(){
        this.$refs.ruleForm.resetFields()
        this.$refs.upload.clearFiles();
        this.ruleForm.imageUrlArr = []
      },
      getFile(file){
        const isImg = file.raw.type == 'image/jpeg' || file.raw.type == 'image/jpg' || file.raw.type == 'image/png';
        const isLt5M = file.raw.size / 1024 / 1024 < 5;
        if (!isImg || !isLt5M) {
          this.imgRemove()
          if (!isImg) {
            this.$message.error('上传识别图片只能是 png,jpg,jpeg 格式!');
          } else if (!isLt5M) {
            this.$message.error('上传识别图片大小不能超过 5MB!');
          }
          return;
        };
        this.getBase64(file.raw).then(res => {
          if(res) {
            this.drawingShow=true;
            this.ruleForm.imageUrl=res;
          }
          else{
            this.$message('error',"图片转base64失败，请重试");
          }
        })
      },
      //图片转base64
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
      imgRemove(){
        this.ruleForm.imageUrl = '';
      },
      //关闭会员详情模态框；
      closeMemberDialog(){
        this.personData={
          person_img_url:'',
          person_img_base64:'',
          person_name:'',
          age:'',
          sex:'1',
          mobile:'',
          person_number:'',
          ext_number:'',
          record_date_str:'',
          album_id:'',
          person_id:'',
        }//会员详情详细数据
        this.activeName = 'caseInfo'
      },


      //点击列表详情按钮
      detailsCreate(id = false){
        this.isShowMember = true;
        let asyncFun = async ()=>{
          await this.getPerson(id)
          await this.getCompany()
          await this.getCase()
          if(this.activeName == 'areaInfo'){
            await this.getArea();
          }
        }
        asyncFun().then(data=>{
          this['get_'+ this.activeName]()
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading',false)
        })

      },
      //根据id获取会员详情
      getPerson(id){
        let p = new Promise((res,rej)=>{
          let url = '/sys/face_person/get?person_id='+ id
          this.$api.get(url)
          .then(data=>{
            console.log(data);
            data.data.record_date = moment(data.data.record_date).format('YYYY-MM-DD HH:mm:ss');
            data.data.sex = String(data.data.sex);
            Object.assign(this.personData,data.data);
            console.log(this.personData,'this.personData');
            res()
          })
          .catch(err=>{
            console.log(err);
            rej(err)
          })
        })
        return p
      },

      //获取企业树
      getCompany(){
        let p = new Promise((res,rej)=>{
          let url = '/sys/report_assist_new/company_tree';
          this.$api.get(url)
          .then(data => {
            if(data){
              recursion(data.data);
              function recursion(val) {
                if(val.length){
                  for(let i in val){
                    val[i].value = val[i].id;
                    val[i].label = val[i].company_name;
                    val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                    if(val[i].children && val[i].children.length){
                      recursion(val[i].children)
                    }else{
                      delete val[i].children
                    }
                  }
                }
              }
              this.$nextTick(()=>{
                let arr = [];
                recursionData(Array.of(data.data[0]))
                function recursionData(val) {
                  if(val.length){
                    for(let i in val){
                      if(val[i].children){
                        recursionData(val[i].children)
                      }else{
                        arr.push(val[i].node_location.split('-').slice(0,-1))
                        delete val[i].children
                      }
                    }
                  }
                }
                this.tags_optionsCom = data.data;
                let company_id_arr = [];//配置当前第一个选中的值
                arr.map(x=>{
                  for(let i = 0 ; i < x.length;i++){
                    if(x[i] == data.data[0].id){
                      company_id_arr.push(x.slice(i,x.length))
                    }
                  }
                });
                this.tags_company_id_arr = company_id_arr;
                this.tags_company_id = company_id_arr.join(',');
                res();
              })
            }
          })
          .catch(err=>{
            this.tags_optionsCom = [];
            this.tags_optionsCase = [];
            this.tags_company_id_arr = [];
            this.tags_company_id = null;
            this.tags_case_id = '';
            rej('未获取到企业树')
          })
        })
        return p
      },
      //获取案场
      getCase(){
        let p = new Promise((res,rej)=>{
          let lsarr=[];
          let company_id_arr = this.tags_company_id_arr
          for(let i in company_id_arr) {
            lsarr.push(company_id_arr[i][company_id_arr[i].length-1])
          }
          let params={
            org_id_list:lsarr,
            org_type:1
          }
          let url='/sys/report_assist_new/case_list'
          this.$api.post(url,params)
          .then(data=>{
            this.tags_optionsCase = [];
            this.tags_case_id = '';
            console.log(data.data);
            if(data.data && data.data.length){
              this.tags_optionsCase = data.data;
              this.tags_case_id = data.data[0].id;
              res();
            } else{
              this.tags_optionsCase = [];
              this.tags_case_id = '';
              rej('该企业下无案场?')
            }
          })
          .catch(err=>{
            this.tags_optionsCase = [];
            this.tags_case_id = '';
            rej('该企业下无案场!')
          })
        })
        return p
      },
      //获取区域
      getArea(){
        let p = new Promise((res,rej)=>{
          if(!this.tags_case_id) {
            this.$message.warning('该企业下无案场!');
            this.tags_area_id = '';
            this.tags_optionsArea = [];
            rej()
            return;
          }
          //初始化设置区域多选
          let params={
            org_id_list:Array.of(this.tags_case_id),
            org_type:2
          }

          let url='/sys/report_assist_new/find_area'
          this.$api.post(url,params)
          .then(data=>{
            this.tags_area_id = '';
            this.tags_optionsArea = [];
            if(data.data && data.data.length){
              this.tags_optionsArea = data.data.map(x => {
                if (x.tags && x.tags.includes(-1)) {
                  x.area_name = '[排除]' + x.area_name
                }
                return x
              })
              //默认全选状态
              this.tags_area_id = this.tags_optionsArea[0].area_id;
              this.$nextTick(() => {
                this.changeBgColor()
                res()
              });
            }
          })
          .catch(err=>{
            console.log(err);
            this.tags_area_id = '';
            this.tags_optionsArea = []
            rej(err)
          })
        })
        return p
      },

      //进场频率页面
      get_caseInfo(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.case_tableData = []
        let url = '/sys/face_report/person_case_frequency?case_info_id='+ this.tags_case_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.case_tableData = data.data.map(x=>{
              x.intoTime = moment(x.first_capture_time).format('YYYY-MM-DD')
              x.first_capture_time = moment(x.first_capture_time).format('HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //进店频次
      get_areaInfo(){
        console.log('get_areaInfo');
        if(!this.tags_area_id){
          this.$message.warning('请选择店铺')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.area_tableData = []
        let url = '/sys/face_report/person_area_frequency?area_id='+ this.tags_area_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.area_tableData = data.data.map(x=>{
              x.intoTime = moment(x.first_capture_time).format('YYYY-MM-DD')
              x.first_capture_time = moment(x.first_capture_time).format('HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //进店频次
      get_areaTrajectory(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.areaTrajectory_tableData = []
        let url = '/sys/face_report/face_area_track?case_info_id='+ this.tags_case_id +
          '&person_id='+ this.personData.person_id + '&start_day=' +this.tags_day + '&end_day=' +this.tags_day
        this.$api.post(url)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.areaTrajectory_tableData = data.data.map(x=>{
              x.capture_time = moment(x.capture_time).format('YYYY-MM-DD HH:mm:ss')
              return x
            })
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //品牌喜好
      get_brandLike(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.brandLike_tableData = []
        let params = {
          org_id_list:Array.of(this.tags_case_id),
          org_type:2
        }
        let url = '/sys/face_report/person_tag_sum?person_id='+ this.personData.person_id +
          '&tag_type=5&tags=2&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url,params)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.brandLike_tableData = data.data
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },
      //业态喜好
      get_formatLike(){
        if(!this.tags_case_id){
          this.$message.warning('请选择案场')
          return;
        }
        if(!this.tags_start_day){
          this.$message.warning('请选择日期')
          return;
        }
        this.$Bus.$emit('Loading', true)
        this.formatLike_tableData = []
        let params = {
          org_id_list:Array.of(this.tags_case_id),
          org_type:2
        }
        let url = '/sys/face_report/person_tag_sum?person_id='+ this.personData.person_id +
          '&tag_type=3&tags=2&start_day=' +this.tags_start_day[0] + '&end_day=' +this.tags_start_day[1]
        this.$api.post(url,params)
        .then(data=>{
          console.log(data)
          if(data.data && data.data.length){
            this.formatLike_tableData = data.data
          }
          this.$Bus.$emit('Loading', false)
        })
        .catch(err=>{
          console.log(err);
          this.$Bus.$emit('Loading', false)
        })
      },

      //标签切换
      handleClick(tab,event){
        this.$Bus.$emit('Loading',true)

        if(this.activeName == 'areaInfo'){
          this.getArea().then(()=>{
            this.getData()
          })
        }else{
          this.tags_area_id = '';
          this.tags_optionsArea = [];
          this.getData()
        }
      },
      //点击编辑按钮
      editMember(){
        this.isShow = true;
        this.isDisabled = true;
        this.pageTitle = '编辑'+ this.global.name +'信息'
        this.$nextTick(()=>{
          this.ruleForm.imageUrlArr.push(
            {
              name:this.personData.person_name,
              url:this.personData.person_img_url
            }
          );
          this.ruleForm.imageUrl = this.personData.person_img_base64
          Object.assign(this.ruleForm,this.personData)
          this.ruleForm.record_date_str = this.personData.record_date
        })
      },
      //进场频次企业change事件
      tags_companyVisibleChange(val){
        if(!val){
          this.tags_companyChange();
        }
      },
      //进场频次企业change事件
      tags_companyRemoveTag(){
        this.$nextTick(()=>{
          if(this.tags_company_id_arr.length){
            this.tags_companyChange()
          }else{
            this.tags_optionsCase=[];
            this.tags_case_id='';
          }
        })
      },
      tags_companyChange(){
        if(!this.tags_company_id_arr.length) {
          this.tags_optionsCase=[];
          this.tags_case_id='';
        }
        let company_id_arr = this.tags_company_id_arr.map(x => {
          return x.slice(-1)[0]
        });
        this.tags_company_id = company_id_arr.join(',')

        this.case_tableData = [];
        this.area_tableData=[]
        this.areaTrajectory_tableData=[];
        this.brandLike_tableData = []
        this.formatLike_tableData = []

        this.getCase().then(()=>{
          if(this.activeName == 'areaInfo'){
            this.getArea().then(()=>{
              this.getData()
            })
            .catch(err=>{
              console.log(err);
              this.$message.warning(err)
            })
          }else{
            this.getData()
          }
        })
        .catch(err=>{
          console.log(err);
          this.$message.warning(err);
        })
      },

      tags_CaseChange(){
        this.case_tableData = [];
        this.area_tableData=[]
        if(this.activeName == 'areaInfo'){
          this.getArea().then(()=>{
            this.getData()
          })
          .catch(err=>{
            console.log(err);
            this.$message.warning(err)
          })
        }else{
          this.getData()
        }
      },

      tags_AreaChange(){
        this.case_tableData = [];
        this.area_tableData=[]
        this.areaTrajectory_tableData=[];
        this.brandLike_tableData=[];
        this.formatLike_tableData=[];
        this.getData()
      },
      getData(){
        this['get_'+ this.activeName]()
      },
      showImg(data){
        console.log(data);
        this.isShowImg = true
        this.showImgUrl = data.capture_panorama_url ? data.capture_panorama_url : data.capture_face_url ? data.capture_face_url : ''
      },
      //改变下拉框中选中的字体颜色
      changeBgColor(){
        $('.el-select__tags').find('.el-select__tags-text').each(function (i) {
          if($(this).html().includes('[排除]')){
            // $(this).parent().css({background:'#f56c6c'})
            $(this).css({color:'#f56c6c'})
          }else{
            $(this).css({color:'#777'})
          }
        })
      },
    }
  }
</script>
